import React, { Component } from 'react';
import {
  NavBar,
  Icon,
  Carousel,
  WingBlank,
  SearchBar,
  Tabs,
  Badge,
  List
} from 'antd-mobile';
import { connect } from 'react-redux';
import { fetchImg } from '../actions/carousel';
import style from '../css/home.css';

const Item = List.Item;
const Brief = Item.Brief;

const tabs = [
  { title: <Badge text={'1'}>回话消息</Badge> },
  { title: <Badge text={'热点'}>新闻</Badge> },
  { title: <Badge dot>动态</Badge> }
];
const mapStateToProps = state => {
  return {
    data: state.carousel
  };
};

class Home extends Component {
  componentDidMount() {
    this.props.fetchImg();
  }
  render() {
    const { data } = this.props;
    return (
      <div>
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[
            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            <Icon key="1" type="ellipsis" />
          ]}
        >
          首页
        </NavBar>
        <SearchBar placeholder="Search" maxLength={8} />
        <WingBlank>
          <Carousel autoplay infinite>
            {data.map(val => (
              <a
                key={val.id}
                style={{ display: 'inline-block', width: '100%', height: 170 }}
              >
                <img
                  src={val.url}
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>
        <Tabs tabs={tabs} initialPage={0}>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              height: '100%',

              backgroundColor: '#fff'
            }}
          >
            <div
              style={{
                overflow: 'hidden',
                whiteSpace: 'noWrap',
                textOverflow: 'ellipsis'
              }}
            >
              <List renderHeader={() => '名字XXX'} className="my-list">
                {data.map(val => (
                  <Item
                    arrow="empty"
                    multipleLine={true}
                    onClick={() => {}}
                    key={val.id}
                    platform="android"
                  >
                    {val.name}
                    <Brief wrap={true}>{val.text}</Brief>
                  </Item>
                ))}
              </List>
            </div>
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              height: '250px',
              backgroundColor: '#fff'
            }}
          >
            Content of two tab
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              height: '150px',
              backgroundColor: '#fff'
            }}
          >
            Content of third tab
          </div>
        </Tabs>
      </div>
    );
  }
}
export default connect(
  mapStateToProps,
  { fetchImg }
)(Home);
